<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限极菜单</title>
    <style>
        body {
            margin: 0;
            background: #e3ecf3;
            min-height: 100vh;
            text-indent: 10px;
        }
        ul span{
            text-indent: 0;
        }

        h1 {
            margin: 40px auto;
            width: 208px;
            height: 56px;
            color:#fff;
        }

        ul {
            padding: 0;
            margin: 0 0 0 100px;
            list-style: none;
            /* display: none; */
        }

        .list-wrap>ul {
            display: block;
        }


        li {
            line-height: 30px;
            cursor: pointer;
            border-left: 1px dotted #e15671;
            position: relative;
        }
        .last{
            border-left:none;
        }
        span {
            padding: 0 10px;
            margin-left: -15px;
            color: #e15671;
            position: absolute;
            left: 0;
            top: 0;
        }
        h4{
            font-weight: normal;
            margin: 0;
        }
        
    </style>
</head>

<body>
    <h1>无限级菜单</h1>
    <div class="list-wrap">
        <!-- <ul>
            <li>
                <span>+</span>
                <h4>第一阶段 JS基础入门</h4>
                <ul>
                    <li>
                        <span>+</span>
                        第一章
                        <ul>
                            <li class="last">JS简介</li>
                            <li class="last">JS简介</li>
                            <li class="last">JS简介</li>
                        </ul>
                    </li>
                    <li>
                        <span>+</span>
                        第二章
                    </li>
                </ul>
            </li>
            <li class="last">
                <h4>第二阶段 JS核心功能探秘</h4>
            </li>
        </ul> -->
    </div>
    <script src="./js/data.js"></script>
    <script>
        var listW = $('.list-wrap');
        var listData = datas;
        var txt = createList( listData );
        listW.innerHTML = txt;
        function createList( datas ) {
            var str = '';
            for( var i=0;i<datas.length;i++ ) {
                if( !!datas[i].children ) {
                   var vv = createList( datas[i].children );
                   str += '<li><span>+</span>'+datas[i].name+vv+'</li>';
                }else{
                   str += '<li class="last">'+datas[i].name+'</li>';
                }
               
            }
            
            if( str ) {
                str = '<ul>'+str+'</ul>';
            }
            return str;
        }
        var num = 0;

        
        function $$(obj) {
            return document.querySelectorAll(obj);
        }
        function $(obj) {
            return document.querySelector(obj);
        }
    </script>
</body>

</html>